<template>
     <span class="el-tag-list">
          <el-tag v-for="tag in data" :key="convertTag({target:tag,value:true})" :closable="closable"
               :disable-transitions="disableTransitions" @close="handleClose(tag)">
               {{convertTag({target:tag,label:true})}}
          </el-tag>

          <button-input v-if="enableNewTag" :text="newTagText" :size="size" type="primary"
               icon="el-icon-circle-plus-outline" @click="addNew"></button-input>

          <button-input v-if="enableClearTag && data.length>0" :text="clearTagText" :size="size" type="warning"
               icon="el-icon-delete" @click="clear"></button-input>
     </span>
</template>

<script>
import buttonInput from '../button/input'

export default {
  components: {
    buttonInput
  },
  props: {
    // 数据
    value: {
      type: [Array, String],
      required: true
    },
    size: {
      type: String,
      default: 'mini'
    },
    // 标签数据配置
    props: {
      type: Object,
      default () {
        return {
          label: 'label',
          value: 'value',
          type: ''
        }
      }
    },
    // 关闭标签
    closable: {
      type: Boolean,
      default: true
    },
    // 禁用渐变动画
    disableTransitions: {
      type: Boolean,
      default: false
    },
    // 关闭标签自动移除tag
    autoRemoveTagOnClose: {
      type: Boolean,
      default: true
    },
    enableNewTag: {
      type: Boolean,
      default: true
    },
    newTagText: {
      type: String,
      default: 'Button.New'
    },
    enableClearTag: {
      type: Boolean,
      default: true
    },
    clearTagText: {
      type: String,
      default: 'Button.Clear'
    }
  },
  computed: {
    // 数据
    data () {
      let value = this.value || []

      return [].concat(value)
    }
  },
  methods: {
    // 根据属性和对象获取值
    progressValue (objectScope, objectProperty) {
      let value = objectScope

      let propertyAry = objectProperty.split('.')

      while (propertyAry.length > 0) {
        let property = propertyAry.shift()

        // 容错
        if (value[property] == undefined) {
          continue
        }

        value = value[property]
      }

      return value
    },
    convertTag (tag = {
      label,
      value,
      target
    }) {
      let result = tag.target

      if (
        Object.prototype.toString.call(tag.target) === '[object Object]'
      ) {
        result =
                        tag.label == true
                          ? this.progressValue(tag.target, this.props['label'])
                          : this.progressValue(
                            tag.target,
                            this.props['value'] || this.props['key']
                          )
      }

      return result
    },
    // 添加tag事件
    addNew () {
      this.$emit('add')
    },
    // 清空tag事件
    clear () {
      this.$store.dispatch('confirmWarning', {
        message: '即将清空，',
        then: () => {
          this.$emit('input', [])

          this.$emit('clear')
        }
      })
    },
    // 关闭标签事件
    handleClose (tagData) {
      if (this.autoRemoveTagOnClose) {
        let data = [].concat(this.data)

        data.splice(data.indexOf(tagData), 1)

        this.$emit('input', data)
      }

      this.$emit('close', tagData)
    }
  }
}
</script>

<style scoped>
    .el-tag-list>>>.el-tag {
        margin: 5px 10px 5px 0;
    }
</style>
